<!--
 * @Author: gao_m3
 * @Date: 2021-04-23 18:22:53
 * @LastEditors: zhong_m
 * @LastEditTime: 2021-12-20 14:50:46
 * @Descripttion: 
-->
<template>
  <div v-if="show" class="dialog-container">
    <fks-dialog :title="title" :visible.sync="show" :before-close="handleClose">
      <fks-form
        ref="config"
        :model="config"
        label-position="right"
        :rules="!type ? timeRules : ipRules"
      >
        <fks-form-item v-if="!type" :label="LANG.ACCESS_TIME" prop="time">
          <fks-date-picker
            v-model="config.time"
            type="datetimerange"
            range-separator=" - "
            :start-placeholder="LANG.STARTDATE"
            :end-placeholder="LANG.END_DATE"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
          />
        </fks-form-item>
        <fks-form-item v-if="type" :label="LANG.ADDRESS" prop="ipAddress">
          <fks-input
            v-model="config.ipAddress"
            maxlength="50"
            :placeholder="LANG.ADDRESS_TIP"
          />
        </fks-form-item>
        <fks-form-item :label="LANG.IS_ENABLE" prop="flag">
          <fks-switch v-model="config.flag" />
        </fks-form-item>

        <fks-form-item :label="LANG.ADDITIONAL_INFO" prop="info">
          <fks-input
            v-model="config.info"
            type="textarea"
            maxlength="255"
            show-word-limit
          />
        </fks-form-item>
      </fks-form>
      <span slot="footer" class="dialog-footer">
        <fks-button @click="handleClose">{{ LANG.CANCEL }}</fks-button>
        <fks-button type="primary" @click="handleSubmit">{{
          LANG.CONFIRM
        }}</fks-button>
      </span>
    </fks-dialog>
  </div>
</template>

<script>
import { setConfig } from '../../../api'
export default {
  name: 'NewRule',
  props: {
    type: {}, //时间-地址
    flag: {}, //允许/限制 黑/白
    handleType: {}, //新增 编辑
    show: {
      type: Boolean,
      default: true
    },
    data: {},
    ipBlack: { type: Array },
    ipWhite: { type: Array }
  },
  data() {
    return {
      title: '',
      config: {},
      //时间选择在此刻之前
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 8.64e7
        }
      }
    }
  },
  computed: {
    timeRules() {
      const timeRules = {
        time: [{ required: true, message: this.LANG.TIME_VALIDATE }]
      }
      return timeRules
    },
    ipRules() {
      const ipRules = {
        ipAddress: [{ required: true, validator: this.isIP }]
      }
      return ipRules
    }
  },

  watch: {
    show(val) {
      if (val) {
        this.initData()
        this.config = Object.assign(this.config, this.data)
        this.title =
          (this.handleType ? this.LANG.ADD : this.LANG.EDIT) +
          (!this.type
            ? !this.flag
              ? this.LANG.PASS_TIME
              : this.LANG.LIMIT_TIME
            : !this.flag
            ? this.LANG.IP_BLACK
            : this.LANG.IP_WHITE)
      }
    }
  },
  methods: {
    //判断输入是否为ip
    isIP(rule, value, callback) {
      if (!value) {
        return callback(new Error(this.LANG.IP_VALIDATE))
      } else {
        const re = /((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}/
        if (re.test(value)) {
          callback()
        } else {
          return callback(new Error(this.LANG.IP_NO_VALIDATE))
        }
      }
    },
    initData() {
      this.$set(this.config, 'flag', false)
      this.$set(this.config, 'info', '')
      if (!this.type) {
        this.$set(this.config, 'time', '')
      } else {
        this.$set(this.config, 'ipAddress', '')
      }
    },
    IP2long(ip) {
      //ip转整数
      let num = 0
      let ipBytes = ip.split('.')

      for (let i = ipBytes.length - 1; i >= 0; i--) {
        num += (parseInt(ipBytes[i]) % 256) * Math.pow(256, 3 - i)
      }
      return num
    },
    //ip是否重复/在已有区间内
    repeatValidate() {
      if (this.type) {
        let list
        if (!this.flag) {
          //新增黑名单 看看是否与白名单内的重复
          list = this.ipWhite
        } else list = this.ipBlack

        for (let i = 0; i < list.length; i++) {
          if (list[i].indexOf('-') > -1) {
            let temp = list[i].split('-')
            if (
              this.IP2long(this.config.ipAddress) < this.IP2long(temp[1]) &&
              this.IP2long(this.config.ipAddress) > this.IP2long(temp[0])
            )
              return true
          } else {
            if (list[i] == this.config.ipAddress) {
              return true
            }
          }
        }
      }
    },
    handleSubmit() {
      this.$refs.config.validate((valid) => {
        if (valid) {
          if (this.type) this.config.ipAddress = this.config.ipAddress.trim()
          if (this.repeatValidate()) {
            this.$message.error(
              this.flag ? this.LANG.REPEAT0 : this.LANG.REPEAT1
            )
            return
          }
          this.$emit('submit', JSON.parse(JSON.stringify(this.config)))
        } else {
          return false
        }
      })
    },
    handleClose() {
      this.$refs.config.clearValidate()
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>